<template>
  <div id="app">    
    <h1> 数据的双向绑定</h1>
    msg的值为:{{msg}}
    <br/>
    <input v-model="msg"/>
    <br/>
    <button v-on:click="getMsg()">获取表单的数据1</button>
    <br/>
    <button @click="getMsg()">获取表单的数据2</button>

    <br/>
    <button @click="setMsg()">设置表单的数据1</button>

    <hr/>
    <br/>
    <br/>
    <br/>
    <input type="text" ref="userInfo"/>
    <br/>
    <button v-on:click="getUserInfo()">获取第二个input里面的数据</button>
    <br/>
    <div ref="box">我是一个box</div>


  </div>
</template>

<script>
export default {
  name: "app",
  //数据区域
  data() {
    return {
      msg: "你好vue"
    };
  },
  //方法区域
  methods: {
    getMsg() {
      alert(this.msg);
    },
    setMsg() {
      this.msg = "我是改变后的数据";
    },
    getUserInfo() {
      
      //通过ref获取dom节点
      console.log(this.$refs.userInfo);
      alert(this.$refs.userInfo.value);

      //通过dom修改节点的class
      this.$refs.box.style.background = "red";
    }
  }
};
</script>

<style lang="scss">
</style>
